<template>
	<view>
		<view class=""  @click="test">
			测试页面跳转
		</view>
		<subTitle title="首页" subtitle="副标题"></subTitle>
		<!-- 模版字符串 -->
		<view >当前标题{{title}}</view>
		<!-- v-for数组对象 -->
		<view v-for="(item,index) in goods" class="out">
				<view class="row">
					{{index+'-'+item.title}}
				</view>
				<view class="row">
					{{index+'-'+item.price}}
				</view>
		</view>
		<!-- v-for对象 -->
		<view v-for="(value,name,index) in obj" :key="index">
			<view>{{index}}-{{name}}-{{value}}</view>
		</view>
		
		<!-- v-html -->
		<view v-html="code">{{code}}</view>
		
		<!-- img批量显现 -->
		<image :src="'../../static/img/image'+item+'.webp'" mode="" v-for="item in [1,2,3]"></image>
		
		<!-- @click点击事件 -->
		<view class="box" :style="{backgroundColor:color}" @click="clickBg"></view>
		<!-- 绑定样式 -->
		<view class="box" :class="state ? 'myactive': ' ' ">	</view>
		<view class="box" :class="{myactive:state}"></view>
		
		<!-- 案例高亮显示 -->
		<view class="nav">
			<view class="item" :class="navIndex == index? 'active':''"  v-for="(item,index) in navArr" :key="index" @click="clicknav(index)">{{item.title}}</view>
		</view>
		
		<!-- 双向绑定表单的值 -->
		<view class="nav" @click="onclick">标题：{{title}}</view>
		<input type="text" v-model="title"/>
		
		<!-- 模拟真实表单提交案例 -->
			<form action=""v @submit="onSubmit">
				<view class="">
					<input type="text" name="username"/>
				</view>
				<view class="">
					<textarea name="content" id="" cols="30" rows="10"></textarea>
				</view>
				<view class="">
					<button form-type="submit" type="primary">提交</button>
					<button form-type="reset">重置</button>
				</view>
				<view >
					<picker mode="selector" name="school" :range="options" @change="pick" :value="selectValue">
						<view>点击选择学历:{{options[selectValue]}}</view>
					</picker>
				</view>
			</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code:"<h1>uniapp</h1>",
				title:"uniapp",
				num:123,
				arr:[1,2,3],
				obj:{name:"zhangsan",title:"monitor",id:1},
				status:false,
				goods:[{title:"商品1",price:22.5},{title:"商品2",price:27}],
				color:"blue",
				state:true,
				navArr:[
					{title:"首页"},
					{title:"介绍"},
					{title:"教授"},
					{title:"教程"},
				],
				navIndex:0,
				obj:null,
				options:["高中","大专","本科"],
				selectValue:1,
			}
		},
		methods: {
			clickBg(){
				let color = '#'+String(Math.random()).substr(3,6);
				this.color = color;
			},
			clicknav(e){
				this.navIndex = e
			},
			onclick(){
				this.title = Math.random()
			},
			onSubmit(e){
				console.log(e)
				this.obj = e.detail.value
			},
			pick(e){
				this.selectValue =e.detail.value
			},
			test(){
				uni.navigateTo({
					url:"/pages/testnavigator/testnavigator",
				})
			}
		}
	}
</script>

<style lang="scss">
.out{
	.row{
		font-size:50rpx;
		border-bottom: 1px solide #333;
	}
}
.box{
	width:200rpx;
	height: 200rpx;
}

.myactive{
	background-color: black;
}
.nav{
	display:flex;
	justify-content: space-around;
	align-items: center;
	.item{
		flex: 1;
		line-height: 90rpx;
		background: #ccc;
		text-align: center;
	}
	.item.active{
		background: #1AA034;
		color: #fff;
		
	}
}
input{
	border: 1px solid #ccc;
}
</style>
